<template>
  <div v-if="permissionsLists(87)">
    <page-header :title="$t('m.Coupon')" :has-return="false">
      <el-button
        type="primary"
        @click="
          setPageNum(page.current, page.size, params)
          $router.push({
            path: '/reward/coupon/cm'
          })
        "
        v-if="permissionsLists(192)"
      >
        {{ $t('m.branch_Create') }}
      </el-button>
    </page-header>

    <!--容器-->
    <div class="container">
      <div class="box_index">
        <!-- 搜索栏 -->
        <search-bar :options="searchBarOptions" />

        <!--分割线-->
        <div class="line"></div>
        <div class="el_table_div" style="padding-bottom:0;">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane
              :label="item.label"
              :name="item.value"
              v-for="item in optionsType"
              :key="item.value"
            ></el-tab-pane>
          </el-tabs>
        </div>
        <!-- 表格栏 -->
        <div class="table-box" style="padding-top:0;">
          <!--表格-->
          <fast-table :options="fastTableOptions" :data="page.records" />
          <!-- 分页 -->
          <pagination
            :total="page.total"
            :current="page.current"
            :size="page.size"
            @changePageSize="changePageSize"
            @changePageNum="changePageNum"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SearchBar from '@/components/search-bar.vue'
import pagination from '@/components/pagination.vue'
import FastTable from '@/components/fast-table.vue'
import page from '@/mixins/page'

export default {
  components: { SearchBar, pagination, FastTable },
  mixins: [page],
  data () {
    return {
      // 表格options
      fastTableOptions: {},

      // 类型：0-通用优惠券 1-商家优惠券
      optionsType: [
        { value: '2', label: this.$t('m.all') },
        { value: '0', label: this.$t('m.General_coupon') },
        { value: '1', label: this.$t('m.Merchant_coupon') }
      ],

      optionsTime1: [
        { value: '1', label: ' ' + this.$t('m.minute3') },
        { value: '2', label: ' ' + this.$t('m.hour4') }
      ],
      optionsTime2: [
        { value: '1', label: ' ' + this.$t('m.minute2') },
        { value: '2', label: ' ' + this.$t('m.hour3') }
      ],

      // 状态：0-下架 1-上架
      optionsState: [
        { value: '', label: this.$t('m.all') },
        { value: '1', label: this.$t('m.Online_coupon') },
        { value: '0', label: this.$t('m.Offline_coupon') }
      ],

      // 抵扣类型：1-免费时长 2-优惠金额 3-金额折扣
      discountsType: [
        { value: '', label: this.$t('m.all') },
        { value: 1, label: this.$t('m.system_FreeDuration') },
        { value: 2, label: this.$t('m.Order_Discount') },
        { value: 3, label: this.$t('m.Rent_discount') }
      ],
      activeName: '2',
      params: {
        applyType: '',
        deductionType: '',
        state: ''
      },
      permissionsIds: [] //权限id
    }
  },
  watch: {
    'params.applyType' (newval, oldval) {
      // console.log(newval);
      if (newval == '') {
        this.activeName = '2'
      }
    }
  },
  created () {
    this.$store.state.permissions.forEach(item => {
      this.permissionsIds.push(Number(this.$jsencrypt.decrypt(item)))
    })
    if (!this.permissionsLists(87)) {
      return
    }
    this.fastTableOptions = {
      columns: [
        {
          label: this.$t('m.Discount_type'),
          formatter: row =>
            this.$format.stateFormat(row.deductionType, this.discountsType)
        },
        {
          label: this.$t('m.Instructions_for_use'),
          formatter: row =>
            this.$format.strFormat(this.$format.langFormat(row.description))
        },
        {
          label: `${this.$t('m.Redemption')} / ${this.$t('m.Usage')}`,
          formatter: row =>
            this.$format.numberFormat(row.redeemedNum) +
            ' / ' +
            this.$format.numberFormat(row.usedNum)
        },
        {
          label: this.$t('m.system_FreeDuration'),
          formatter: row =>
            this.$format.strFormat(
              row.deduction.type1FreeDurationVal
                ? row.deduction.type1FreeDurationVal +
                    this.$format.stateFormat(
                      row.deduction.type1FreeDurationUnit,
                      row.deduction.type1FreeDurationVal > 1
                        ? this.optionsTime1
                        : this.optionsTime2
                    )
                : ''
            )
        },
        {
          label: this.$t('m.Order_Discount'),
          formatter: row =>
            row.deduction.type2DiscountAmount
              ? this.$format.amountFormat(row.deduction.type2DiscountAmount)
              : '--'
        },
        {
          label: this.$t('m.Rent_discount'),
          formatter: row =>
            this.$format.strFormat(
              row.deduction.type3DiscountAmount
                ? row.deduction.type3DiscountAmount + '%'
                : ''
            )
        },
        {
          label: this.$t('m.Merchant_'),
          formatter: row =>
            row.applyType == 1
              ? this.$format.strFormat(row.merchantNameList)
              : this.$t('m.All_merchants')
        },
        {
          label: this.$t('m.Inventory'),
          formatter: row =>
            row.stockType == 1
              ? this.$format.numberFormat(row.stockNum)
              : this.$t('m.Unlimit')
        },
        {
          label: this.$t('m.point'),
          formatter: row => this.$format.numberFormat(row.exchangePoint)
        },

        {
          label: this.$t('m.status'),
          prop: 'state',
          switch: true,
          activeValue: 1,
          inactiveValue: 0,
          switchChange: this.permissionsLists(195) ? this.editState : ''
        },
        {
          label: this.$t('m.branch_Creationdate'),
          formatter: row => this.$format.dateformat(row.createTime)
        },
        {
          operate: true,
          showcolumn: this.isArrayEqual([193, 192], this.permissionsLists),
          display: 'dropdown',
          actions: [
            {
              label: this.$t('m.Details'),
              permission: row => this.permissionsLists(193),
              click: row => this.toDetail(row)
            },
            {
              label: this.$t('m.branch_Edit'),
              permission: row => this.permissionsLists(192),
              click: row => this.toEdit(row)
            }
          ]
        }
      ]
    }
    this.activeName = this.params.applyType == '' ? '2' : this.params.applyType
    this.getSearchBar()
    this.getPage()
  },
  methods: {
    //权限id校验
    permissionsLists (val) {
      return this.permissionsIds.includes(val)
    },
    getSearchBar () {
      this.searchBarOptions = {
        search: this.search,
        bars: [
          // {
          //   value: this.params.search,
          //   type: 'input',
          //   prop: 'search',
          //   label: this.$t('m.search_'),
          //   placeholder: this.$t('m.Instructions_for_use')
          // },
          {
            value: this.params.deductionType,
            type: 'select',
            prop: 'deductionType',
            label: this.$t('m.Discount_type'),
            options: this.discountsType
          },
          {
            value: this.params.state,
            type: 'select',
            prop: 'state',
            label: this.$t('m.status'),
            options: this.optionsState
          }
        ]
      }
    },
    getPage () {
      this.$api.coupon.getPage(this.params, this.page).then(res => {
        if (this.$ok(res)) {
          this.page = res.data
        }
      })
    },

    // 修改状态
    editState (row) {
      this.$api.coupon
        .editState({
          id: row.id,
          state: row.state == 0 ? 1 : 0
        })
        .then(res => {
          if (this.$ok(res)) {
            this.$message.success(res.message)
            this.getPage()
          } else {
            this.$message.error(res.message)
          }
        })
    },

    handleClick (tab) {
      this.params.applyType = tab.name == '2' ? '' : tab.name
      this.page.current = 1
      this.remPageNum()
      this.getPage()
    },

    toDetail (row) {
      this.setPageNum(this.page.current, this.page.size, this.params)
      this.$router.push({
        path: '/reward/coupon/detail',
        query: { id: row.id }
      })
    },

    toEdit (row) {
      this.setPageNum(this.page.current, this.page.size, this.params)
      this.$router.push({
        path: '/reward/coupon/cm',
        query: { id: row.id }
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>
